<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 600px;
            height: 100px;
            margin: auto;
        }
    </style>
</head>
<body>
   <div>
        <input type="text" value="1,2,3" class="inp" > <span>输入数字求和，数字之间半角","号分隔</span> 
        <br>
        <br>
        <input type="button" value="求和" class="btn"> <span class="sum"></span>

      

   </div>
</body>
</html>
<script>
     window.onload = function(){
         var inp = document.querySelector(".inp")
         var btn = document.querySelector(".btn")
         var s = document.querySelector(".sum")
         inp.onclick=function(){
             this.value = this.value.replace(/[^(\d)|(,)]/,"")
         }
         btn.onclick = function (){
             var sum = 0;
             var inp = document.querySelector(".inp").value.split(",")
             for(var i in inp){
                 sum += parseInt(inp[i])
             }
             s.innerHTML=sum
         }
     }
   
    
</script>